<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数进阶</title>
</head>
<body>
<!--
    1. 动态参数
        arguments 是函数内部内置的伪数组变量，它包含了调用函数时传入的所有实参
    2. 剩余参数
        ...是一种语法符号，置于最末函数形参之前，用于获取多余的实参
        ...获取的剩余实参， 是一个真数组(可以用pop、push方法)
    3. 展开运算符
        定义:展开运算符(...)，将一个数组进行展开        console.log(...arr)
        使用场景: 求数组的最大最小值、合并数组
        (...arr === 元素1 , 元素2 , 元素3 , ... , 元素n)
        注意: 展开运算符和剩余参数的区别
          剩余参数: 函数参数使用，得到真数组
                  function config(baseURL, ...other) {}
          展开运算符: 数组中使用，数组展开
                  const arr = [1 , 2 , 3 , 4 , 5]
                  console.log(...arr)
    4. 箭头函数
        目的: 更简短的函数写法并且不绑定this，箭头函数的语法比函数表达式更加简洁
        使用场景: 箭头函数更适用于那些本来需要匿名函数的地方,并不是什么时候都写箭头函数
        基本语法:
            // 基本函数写法
            function fn() {
                console.log(123)
            }

            // 函数表达式写法
            // 声明
            const fn = function() {
                console.log(123)
            }
            // 使用
            fn()

            // 箭头函数写法 ———— 简单理解：
                                一个参数表()
                                通过箭头 =>
                                进入函数体{}
            // 声明
            const fn = (x , y) => {
                console.log(123)
                return x + y
            }
            (核心声明语句: () => { })
            // 使用
            fn()
        箭头函数参数:
            1.普通函数中既有arguments动态参数，又有 ...arr剩余参数
            2.箭头函数中没有arguments动态参数，但是有剩余参数 ...arr

        箭头函数this:
            1.箭头函数没有自己的this，他的this沿用上一层的this,上一层的this指向哪里他就指向哪里——————所谓层就是用{ }括起来的一层代码块
            2.普通函数的this要看调用函数的对象，谁调用这个函数 this 就指向谁
-->
</body>
<script>
// 函数动态参数
function getSum() {
    let sum = 0
    // arguments是一个数组，里面存着动态的参数,这是个默认的参数值
    console.log(arguments)
    for (let i = 0; i <arguments.length; i++) {
        sum+=arguments[i]
    }
    console.log(sum)
}
getSum(2 , 3 , 4)
// 函数剩余参数介绍
function config(baseURL, ...other) {
    console.log(baseURL)
    console.log(other)
}
config('http://baidu.com' , 'get' , 'json')

// 函数剩余参数实例
function getSum2(...other) {
    let sum = 0
    console.log(other)
    for (let i = 0; i < other.length; i++) {
        sum += other[i]
    }
    console.log(sum)
}
getSum2(2 , 3 , 4)

// 展开运算符
    // 引用类型用const关键词定义
const array1 = [1 , 2 , 3 , 4 , 5]
console.log(...array1)

// 展开运算符求数组最大元素
console.log(Math.max(...array1))
console.log(Math.min(...array1))

// 合并数组
const array2 = [3 , 4 , 5]
const array3 = [...array1 , ...array2] // ...array1 === 1 , 2 , 3 , 4 , 5
console.log(array3)

// 箭头函数
// 基本写法
const fn = () => {
    console.log(123)
}
console.log(fn)
// 单参数单语句写法————vue中最常见
const fn1 = x => console.log(x)
fn1(123)
// 单参数写法
const fn2 = x => {
    console.log(x)
    console.log('哈哈哈')
}
fn2(123)
// 多参数写法
const fn3 = (x , y) => {
    console.log(`我是${x} , 你是${y} `)
}
fn3(123 , 456)
// 单参数单语句带返回值写法（省略return）
const fn4 = x => x + x
console.log(fn4(1))
// 单参数单语句带对象型返回值写法(省略return)
const fn5 = uname => ({uname: uname})
console.log(fn5('Black'))
// 箭头函数只有剩余参数，没有动态参数
const getSum3 = (...arr) => {
    let sum = 0
    for (let i = 0; i < arr.length; i++) {
        sum += arr[i]
    }
    return sum
}
console.log(getSum3(2 , 4  , 5))

// this问题
console.log(this)  // this指向window
// 普通函数的this
function fn6() {
    console.log(this) // this指向window
}
window.fn6() // 谁调用的这个函数，this就指向谁
// 对象的this
const obj = {
    name: 'andy' ,
    sayHi: function () {
        console.log(this) // this指向obj
    }
}
obj.sayHi() // 谁调用的这个函数，this就指向谁
// 箭头函数的this
const fn7 = () => {
    console.log(this) // 箭头函数没有自己的this,他的this是上层的this,上层的this指向window(obj的this就是指向window的),所以他的this也指向window
}
fn7() // fn7的上一层是window
const obj2 = {
    uname: 'pink老师',
    sayHi: () => {
        console.log(this) // this指向window
    }
}
// window
obj2.sayHi()
// obj
obj.sayHi()

</script>
</html>